<template>
  <div>
    <a-card>
      <a-row type="flex" justify="space-between">
        <a-col><span class="info">新建系统消息通知</span></a-col>
        <a-col><a-button class="btn" @click="back">返回</a-button></a-col>
      </a-row>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="标题">
          <a-input v-decorator="['标题', { rules: [{ required: true, message: '请先输入标题哦！' }] }]" />
        </a-form-item>
        <a-form-item label="内容">
            <a-textarea :auto-size="{ minRows: 10, maxRows: 100 }"
            v-decorator="['内容', { rules: [{ required: true, message: '请先输入内容哦！' }] }]"
            />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 9 }">
          <a-button type="primary" html-type="submit" style="margin-right: 100px"> 发布 </a-button>
          <a-button type="danger" @click="cancel"> 取消 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  methods: {
    back() {
      this.$router.back()
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
        }else{
        //    错误处理
        }
      });
    },
    // cancel(){
    //     this.form = {}
    // }
  }
}
</script>
<style lang="less" scoped>
.info {
  font-family: 'Arial Negreta', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
}
.btn {
  border-radius: 47%;
  transform: scale(1, 1.2);
}
</style>